<template>
    <div class="container">
        <div class="q_top">
            <dv-box class="dv" title="质量安全">
                    <Echart id="qTop" style="height:100%" :options="qOption" ref="chartsT" />
            </dv-box>
            <dv-box class="dv analysis" title="质量安全分析">
                <div class="statistics">
                        <div v-for="(item, index) in statisticsName" :key="index">
                            <div class="namebox">{{item.name}}</div>
                            <div class="valuebox">
                                {{pieData[item.value]}}
                            </div>
                        </div>
                </div>
                <div class="analyze">
                    <div class="ecahrts">
                            <Echart
                            id="electric1"
                            :options="waterOptions1"
                            >
                            </Echart>
                    </div>
                    <div class="ecahrts">
                              <Echart
                            id="electric2"
                            :options="waterOptions2"
                            >
                            </Echart>
                    </div>
                </div>
            </dv-box>
            <dv-box class="dv" title="整改单位总览">
                <div class="topbar"><div class="topbox"></div><span>整改数量</span></div>
                <Echart id="qTop" :options="qOptionb" ref="chartsB" />
            </dv-box>
        </div>
        <div class="q_bottom" ref="q_bottom">
            <dv-box class="dv" title="隐患检查台账">
                <dv-scroll-board :config="tableConfig" style="width:100%;height:100%" @click="clickTable"></dv-scroll-board>
            </dv-box>
            <dv-box class="dv" title="隐患问题">
                <div class="parent" ref="parent">
                    <vue-seamless-scroll :data="hiddenIssue" :class-option="classOption">   
                        <div class="box" v-for="(item,index) in hiddenIssue" :key="index" @click="clickInfo(item)">
                            <el-image style="width: 20%; height: 100%" :src="item.fileUrl"></el-image>
                            <div class="chiild-text">
                                <p class="describe">{{item.content}}</p>
                                <p class="inspection">巡检人：{{item.createByName}}</p>
                                <p class="person">责任人：{{item.mainPersonName}}</p>
                                <p class="time">时间：{{item.seeTime}}</p>
                            </div>
                        </div>
                    </vue-seamless-scroll>
                </div>
            </dv-box>
        </div>

        <div class="imgPreview" v-if="flag" @click="outImg">
            <el-image :src="imgUrl"></el-image>
            <i class="el-icon-circle-close" @click="outImg"></i>
        </div>
    </div>
</template>

<script>
import dvBox from "@/components/datav/dv-box.vue";
import { filtTimeList } from '@/utils/utils';
import iTable from '@/components/table/table1.vue';
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
    data(){
        return{
            // 表格配置
            tableConfig: {},
            qOption:{},
            qOptionb:{},

            hiddenIssue:[],
            // 统计
            statisticsName:[{name:'质量问题总数',value:'qualityNum'},{name:'安全问题总数',value:'safetyNum'},{name:'重大隐患',value:'hiddenDanger'},{name:'超期未整改',value:'notChangeNum'}],
            pieData:{
                qualityNum:'', // 质量问题总数
                safetyNum:'', // 安全问题总数
                hiddenDanger:'', // 重大隐患总数
                notChangeNum:'', // 整改问题
                yesChange:'', // 已整改问题
                sumHidden:'', // 总隐患数
                monthNotChange:'', // 待整改
                monthApprovalPending:'', // 待审批
                monthToReview:'', // 待复核
            },

            qualitySafetyData:{
                safe:[],
                quality:[],
                data:[]
            },

            waterOptions1:{},
            waterOptions2:{},
            timer:null,
            // 图片预览
            imgUrl:'',
            flag:false,
            // 滚动
                classOption: {
                step: 0.4, // 数值越大速度滚动越快
                limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 2000
            },
        }
    },
    props:{
        id:{
            type:Number|String,
            default:''
        },
    },
    components:{ dvBox, iTable, vueSeamlessScroll },
    mounted(){
        this.getStatistics()
        this.getStatisticsV3()
        this.getunitData()
        this.getSafetyIssue()
        setTimeout(() => {
            this.$refs.parent.style.height = this.$refs.q_bottom.offsetHeight - 80 + 'px'
        }, 0);
    },
    methods:{
        // 隐患问题详情
        clickInfo(info){
            this.flag = true
            this.classOption.step = 0
            this.imgUrl = info.fileUrl
        },
        outImg(){
            this.flag = false
            this.classOption.step = 0.4
            this.imgUrl = ''
        },
        // 表格点击
        clickTable(item){
            // console.log(item)
        },
        // 质量安全分析
        getStatistics(){
            // 0 本周 / 1 本月
             this.$datav.getStatisticsData({projectid: this.id}).then(res => {
                this.pieData.qualityNum = res.data.monthQuality
                this.pieData.safetyNum = res.data.monthSafe
                this.pieData.hiddenDanger = res.data.monthMajorHazard
                this.pieData.notChangeNum = res.data.monthExceed
                this.pieData.yesChange = res.data.monthChange
                this.pieData.monthNotChange = res.data.monthNotChange
                this.pieData.monthApprovalPending = res.data.monthApprovalPending
                this.pieData.monthToReview = res.data.monthToReview
                this.init2()
            })
        },
        // 质量安全14日统计
        getStatisticsV3(){
            this.$datav.getStatisticsV3({projectid: this.id}).then(res => {
                this.qualitySafetyData.quality=res.data.quality
                this.qualitySafetyData.safe=res.data.safe
                for(let i=0 ; i<res.data.safeFi.length ; i++){
                    this.qualitySafetyData.data.push(res.data.safeFi[i]+res.data.qualityFi[i])
                }
                this.init1()
            })
        },
        // 单位总览
        getunitData(){
            // 单位统计
            this.$datav.getInfoDepartment({projectid: this.id}).then(res => {
                let unit = [], num = []
                for(let key in res.data){
                    unit.push(key)
                    num.push(res.data[key])
                }
                this.init4(unit,num)
            })
        },
        // 隐患问题  台账数据
        getSafetyIssue(){
            let arr = []
            this.$datav.getSafetyIssue({size:999,current:1,projectid: this.id}).then(res => {
                this.hiddenIssue = res.data.records
                res.data.records.map(item => {
                    arr.push([item.positionName,item.content,item.createByName,item.mainPersonName,item.seeTime,this.filtStatus(item.status)])
                })
                this.tableConfig = {
                    header: ['部位', '问题描述', '巡查人','负责人', '巡查日期', '状态'],
                    index: true,
                    rowNum:8,
                    headerHeight:40,
                    columnWidth:[80,300,400,300,300,300,300],
                    // headerBGC:'rgba(2, 49, 100, .2)',
                    // oddRowBGC:'rgba(0,59,81,.2)',
                    // evenRowBGC:'rgba(10,39,50,.2)',
                    headerBGC:'#F2F3F5',
                    oddRowBGC:'rgb(255, 255, 255,0)',
                    evenRowBGC:'rgb(255, 255, 255,0)',
                    data:arr
                }
            })
        },

        filtStatus(type){
            switch(type){
                case 1 :
                  return '<span style="color:#909399">待审核</span>'; 
                case 2 :
                  return '<span style="color:#F56C6C">审批未通过</span>';
                case 3 :
                  return '<span style="color:#FACC3A">待整改</span>';
                case 4 :
                  return '<span style="color:#0082FF">待复核</span>';
                case 5 :
                  return '<span style="color:#e429e4">复核未通过</span>';
                case 6 :
                  return '<span style="color:#faf38c7c">空</span>';
                case 7 :
                  return '<span style="color:#e619577c">已超期</span>';
                case 8 :
                  return '<span style="color:#3DF2B7">已完成</span>';
                case 9 :
                  return '<span style="color:#00ff997c">超期已完成</span>';
                case 10 :
                  return '<span style="color:#159AFF">已终止</span>';
            }
        },
        init1(){
            this.qOption={
            color:[
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: '#FFD03B' }, // 设置颜色渐变
                        { offset: 1, color: 'rgba(255,208,59,0.0900)' }
                    ]
                },
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: '#D9E7FF' }, // 设置颜色渐变
                        { offset: 1, color: 'rgba(0,0,0,0.3500)' }
                    ]
                }
            ],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                top:'8%',
                bottom: '0%',
                containLabel: true
            },
            legend: {
                right:0,
                icon:'rect',    
                show:false,
                data: ['质量数量', '安全数量', '整改完成']
            },
            xAxis: [
                {
                    type: 'category',
                    data: filtTimeList(13),
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel:{
                        color:'#000',
                        // color:'#D0DEEE'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    splitLine:false,
                    axisLabel: {
                        color:'#000',
                        // color:'#D0DEEE'
                        formatter: '{value}'
                    }
                },
                {
                    type: 'value',
                    axisLabel: {
                        color:'#000',
                        // color:'#D0DEEE'
                        formatter: '{value}'
                    }
                },
            ],
            series: [
                {
                    name: '质量数量',
                    type: 'bar',
                    barWidth: 12, 
                    tooltip: {
                        valueFormatter: function (value) {
                        return value;
                        }
                    },
                    data: this.qualitySafetyData.quality
                },
                {
                    name: '安全数量',
                    barWidth: 12, 
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                        return value;
                        }
                    },
                    data: this.qualitySafetyData.safe
                },
                {
                    name: '整改完成',
                    type: 'line',
                    yAxisIndex: 1,
                    smooth: false,
                    lineStyle:{
                        color:'#FE9811'
                        // color:'#fff'
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                        return value;
                        }
                    },
                    data: this.qualitySafetyData.data
                }
            ]
        
            }
        },
        init2(){
            this.waterOptions1= {
                title: {
                text: this.pieData.hiddenDanger,
                subtext: '总隐患数',
                left: 'center',
                top: '35%',
                itemGap: 5,
                textStyle: {
                    // #FFFFFF
                    color: '#000',
                    fontSize: 42,
                    lineHeight: 24,
                    fontWeight: 'normal',
                    fontFamily: 'youshe'
                },
                subtextStyle: {
                    // #FFFFFF
                    color: '#000',
                    fontSize: 13,
                    lineHeight: 60,
                    fontWeight: 'bold',
                }
                },
                legend: {
                    show: true,
                    bottom: 0,
                    icon:'circle',
                    textStyle:{
                        color:'#000'
                        // color:'#fff'
                    }
                },
                series: [
                {
                    type: 'pie',
                    center: ['50%', '45%'],
                    radius: ['58%', '70%'],
                    animation: false,
                    hoverAnimation: false,
                    itemStyle: {
                    borderWidth: 5,
                    borderColor: '#fff'
                    // borderColor: 'rgba(1, 13, 27, 1)'
                    },
                    label: {
                    show: false
                    },
                    color: [
                    '#3DF2B7',
                    '#66E1DF',
                    '#0082FF',
                    '#FACC3A',
                    ],
                    data: [
                        {
                            name: '待整改: '+this.pieData.monthNotChange,
                            value: this.pieData.monthNotChange
                        },
                        {
                            name: '已完成: '+this.pieData.yesChange,
                            value: this.pieData.yesChange
                        },
                        {
                            name: '待审批: '+this.pieData.monthApprovalPending,
                            value: this.pieData.monthApprovalPending
                        },
                        {
                            name: '待复核: '+this.pieData.monthToReview,
                            value: this.pieData.monthToReview
                        }
                    ]
                },
                {
                    type: "pie",
                    center: ['50%', '45%'],
                    radius: "52%",
                    animation: false,
                    hoverAnimation: false,
                    label: {
                    show: false,
                    },
                    labelLine: {
                    show: false,
                    },
                    itemStyle: {
                    normal: {
                        color: {
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                            offset: 0,
                            color: 'rgba(3,116,254,0.1000)'
                            },
                            {
                            offset: 1,
                            color: 'rgba(3,116,254,0.1000)'
                            }
                        ]},
                        borderColor: "rgba(99, 206, 246, 1)",
                        borderWidth: 2,
                    },
                    },
                    data: [100],
                },
                ]
            }
            this.waterOptions2={
            legend: {
                show: false,
                bottom: 0,
                textStyle:{
                    color:'#000'
                    // color:'#fff'
                }
            },
            color:['#159AFF','#979797'],
            series: [
            {
                type: "gauge",
                name: '已整改',
                center: ['50%', '45%'],
                radius: "70%",
                pointer: {
                show: false
                },
                axisLine: {
                lineStyle: {
                    width: 2,
                    color: [[1, 'rgba(0, 130, 255, 1)']],
                    opacity: 0.8,
                }
                },
                axisLabel: {
                show: false
                },
                axisTick:{
                splitNumber: 3,
                length: 10,
                distance: 16,
                lineStyle: {
                    color: 'rgba(102, 225, 223, 1)',
                    width: 2
                }
                },
                splitLine: {
                show: false
                },
                detail: {
                color: 'rgba(0, 0, 0, 1)',
                fontSize: 26,
                offsetCenter: [0, 0],
                formatter: val=>val + '%'
                },
                title: {
                  color: 'rgba(0, 0, 0, 1)',
                  offsetCenter: [0, '80%']
                },
                data: [
                {
                    name: '整改率',
                    value: this.pieData.yesChange !== 0 ? ((this.pieData.yesChange/(this.pieData.qualityNum+this.pieData.safetyNum))*100).toFixed(2) : 0
                }
                ]
            },
            ]
            }
        },
        init4(unit,num){
            this.qOptionb={
                tooltip: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    top:'5%',
                    bottom: '0%',
                    containLabel: true
                },
                color:[
                    {
                        type: 'linear',
                        x: 1,
                        y: 0,
                        x2: 0,
                        y2: 0,
                        colorStops: [
                            { offset: 0, color: '#66E1DF' }, // 设置颜色渐变
                            { offset: 1, color: 'rgba(0,89,84,0)' }
                        ]
                    }
               ],
                xAxis: {
                    type: 'value',
                    axisLine: {
                        show: false, // 不显示坐标轴线
                    },
                    axisLabel:{
                        color:'#000',
                        // color:'#D0DEEE'
                    }
                },
                yAxis: {
                    type: 'category',
                    data: unit,
                    axisLabel:{
                        color:'#000',
                        // color:'#D0DEEE'
                    }
                },
                series: [
                    {
                        data: num,
                        type: 'bar',
                        barWidth:15,
                        label: {
                            show: false,
                            position: 'right',
                            valueAnimation: true,
                            textBorderWidth:'0',
                            color:'#000',
                            // color:'#fff',
                            fontSize:'15px'
                        }
                    }
                ]
            }
        }
    }
}
</script>

<style lang='scss' scoped>
.container{
    width: 100%;
    height: 100%;
    .q_top{
        width: 100%;
        height: 50vh;
        display: flex;
        justify-content: space-between;
        padding-bottom: 40px;
        .dv{
            width: calc(100% / 3 - 20px) !important;
            height: 100%;
            margin-bottom: 20px;
        }
        .analysis{
            position: relative;
            .statistics{
                display: flex;
                justify-content: space-around;
                .namebox{
                    width: 121px;
                    height: 6px;
                    background: #6c809757;
                    margin-bottom: 14px;
                    text-align: center;
                    line-height: 6px;
                    // color: #fff;
                    @include font_color($font-color-theme1);
                    font-weight: bold;
                }
                .valuebox{
                    text-align: center;
                    width: 121px;
                    height: 38px;
                    background: #6c809757;
                    line-height: 38px;
                    font-size: 28px;
                    font-weight: normal;
                    font-family: 'youshe',Microsoft YaHei;
                    // text-shadow: 0px 0px 9px #159AFF;
                    // color: #fff;
                    @include font_color($font-color-theme2);
                }
            }
        }
        .analyze{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-around;
            .ecahrts{
                width: 50%;
            }
        }
    }
    .q_bottom{
        display: flex;
        justify-content: space-around;
        width: 100%;
        height:35vh;
        .dv{
            width: 48% !important;
            height: 100% !important;
            .parent {
                width: 100%;
                height: 100%;
                margin: 0 auto;
                overflow: hidden;
                color: #fff;
            }
        }
    }
}


/*设置的子盒子高度大于父盒子，产生溢出效果*/
.child {
  height: auto;
}
.box{
  margin: 20px 0;
  height:91px;
  display: flex;
  p{
    margin: 0;
    padding: 0;
  }
  .chiild-text{
    padding: 5px 0;
    margin-left: 23px;
    .describe{
        font-size: 16px;
        font-weight: normal;
        // text-shadow: 0px 0px 9px #159AFF;
        // color: #FFFFFF;
        @include font_color($font-color-theme2);
        font-family: Microsoft YaHei;
        padding-bottom: 4px;
    }
    p{
        font-size: 12px;
        line-height: 20px;
        color: #444;
        // color: #D0DEEE;
    }
  }
}
.box:nth-of-type(n){
  background: rgba(10, 39, 50, 0.2);
}
.box:nth-of-type(2n){
  background: rgba(0, 59, 81, 0.2)
}
.imgPreview{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(5, 5, 5, 0.712);
    z-index: 999;
    .el-image{
        width: 50%;
        height: 50%;
        top: 25%;
        left: 25%;
    }
    .el-icon-circle-close{
        position: fixed;
        top: 6%;
        right: 6%;
        font-size: 50px;
        color: #fff;
        cursor: pointer;
    }
}
.topbar{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .topbox{
        width: 8px;
        height: 8px;
        background: #66E1DF;
    }
    span{
        font-size: 12px;
        margin-left: 4px;
        // color: #D0DEEE;
        @include font_color($font-color-theme1);
    }
}
.box:nth-of-type(n){
    background: #d1d1d12c;
}
.box:nth-of-type(2n){
    background: rgb(255, 255, 255);
}
@include dvScroll

</style>
